<template>
    <div style="margin: 5px 20% 5px 1%;width:60vw; border: 1px ;border-radius: 20px; box-shadow: 0 0 2px rgb(50, 90, 90);">
        <div style="margin:5px 20px;height:5vh;text-align: center; overflow: hidden;">
            <h3>{{ post.title }}</h3>
        </div>
        <!-- <hr> -->
         <div class="content">
             <pre v-html="post.content"></pre>
         </div>
         <!-- <hr> -->
        <div style="margin: 10px 0 0 20px;text-align: left;font-size:18px">
            <router-link :to="{ name: 'postEdit',query:{id: post.id }}" v-has="'edit_post'">编辑</router-link> 
            <a style="margin-left: 50px;color:red" @click="btn_delete_post">删除</a>
        </div>
    </div>
</template>

<script>
import axios from 'axios';
import { blog_delete,blog_detail} from  '@/api'


export default {
    data() {
        return {
            post: [],
        }
    },
    methods: {
        // 删除文章
        btn_delete_post(){
            let id = this.post.id
            let title = this.post.title
            let result = confirm("确定要删除<"+title+">吗?")
            if(result == false) return 
            let data = {"id":id}

            axios({
                url:blog_delete,data:data,method:'post'
            }).then( (response) => {
                let info = JSON.stringify(response.data)
                if(info.indexOf('ok') != -1) {
                    this.$Message.success('删除文章成功')
                    // this.$router.push({name:'postList'})
                    setTimeout(() =>{
                        window.location.href="about:blank";
                        window.close();
                    },1000); 

                }else {
                    alert(info)
                }
            })
        },
        refresh() {
            let query = this.$router.currentRoute.query
            let id = query.id
            console.log("post detail 接收到的参数id:",id)
            if(id){
                let data = {"id":id}
                axios({
                    url:blog_detail,data:data,method:'post',timeout:2000,
                }).then( (response) => {
                    this.post = response.data
                })
            }
        }
    },
    mounted: function() {
        setTimeout(() =>{
            this.refresh();
        },200); 
    }
}
</script>
<style scoped>
.content {
    padding: 3px 0 0 10px;
    height: 70vh;
    overflow: auto;
}
pre {
    padding: 5px ;
    white-space: pre-wrap;
    word-wrap: break-word;
    font-family:Georgia, 'Times New Roman', Times, serif
}
</style>